<template>
  <div class="menuList">
    <el-tabs type="border-card">
      <el-tab-pane label="微课列表">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="text-align: left">
            <div style="float:left">
              <i class="el-icon-success"></i>
              <span>通过作品</span>
            </div>
            <el-select
              v-model="value"
              placeholder="请选择"
              style="float:right"
              @change="change(value)"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <el-table :data="pExamine" border style="width: 100%">
            <el-table-column fixed prop="wk_id" label="微课ID" width="150"></el-table-column>
            <el-table-column label="微课封面" width="82">
              <template slot-scope="scope">
                <img :src="scope.row.wk_pic" width="60" height="40" class="head_pic" />
              </template>
            </el-table-column>
            <el-table-column prop="wk_name" label="视屏名称" width="120"></el-table-column>
            <el-table-column prop="wk_total_time" label="时长" width="120"></el-table-column>
            <el-table-column prop="category_name" label="微课类别" width="120"></el-table-column>
            <el-table-column prop="wk_introduce" label="微课介绍"></el-table-column>
            <el-table-column prop="wksucc" label="获奖详情">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  :style="scope.row.color"
                  style="font-weight: 700;"
                >{{scope.row.wksucc}}</el-button>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  icon="el-icon-view"
                  @click="left(scope.row.wk_id)"
                  size="small"
                  plain
                  style="float:letf"
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  @click="delWk(scope.row.wk_id)"
                  size="small"
                  plain
                  style="float:right"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <el-drawer :visible.sync="drawer" direction="rtl" size="50%" :with-header="false">
      <el-divider content-position="left">
        <i class="el-icon-video-camera-solid"></i>微课详情
      </el-divider>
      <div class="evamine">
        <p>
          微课名称：
          <b>{{gridData.wk_name}}</b>
          ——
          <b style="color:blue">{{gridData.category_name}}</b> 类
        </p>
        <div style="width:95%">
          <video :src="gridData.wk_video_adress" controls style="width:60%!important"></video>
          <p style="text-indent:2em;text-align: left;width: 38%;">{{gridData.wk_introduce}}</p>
        </div>
      </div>
      <el-divider content-position="left">
        <i class="el-icon-s-comment"></i>评价
      </el-divider>
      <div
        class="block demo-drawer__content"
        v-show="dataEV == 1"
        style=" overflow: scroll !important;height:420px"
      >
        <el-timeline>
          <el-timeline-item placement="top" v-for="item of evData" :key="item.inde">
            <el-card>
              <p>
                <img :src="item.user_pic" alt style="width:20px;hight:20px;border-r" />
                <span style="padding-left:20px;font-size: 12px;">{{item.user_account}}</span>
                <i
                  class="el-icon-delete"
                  style="float:right;font-size:12px"
                  @click="delEval(item.evaluate_id,item.wk_id)"
                ></i>
              </p>
              <p style="padding-top:5px;font-size:18px">{{item.evaluate_message}}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <p v-show="dataEV == 0" style="text-align: left;padding-left: 22px;">暂无评论(#^.^#)</p>

      <div style="height: 100px;bottom: 0;position: fixed;width: 50%;z-index:2002;background:#fff">
        <el-divider content-position="left">
          <i class="el-icon-s-check"></i>审核获奖
        </el-divider>
        <div v-show="gridData.wk_success ==  0">
          <el-button type="success" @click="pass(gridData.wk_id,1)">哇偶~获奖</el-button>
          <el-button type="danger" @click="pass(gridData.wk_id,2)">哦不~差点</el-button>
        </div>
        <div  v-show="gridData.wk_success !=  0">
          <el-button type="text">嗯哼~~你已经评审过此条微课啦</el-button>
          <b v-show="gridData.wk_success ==  1" style="color:green">获奖微课</b>
          <b v-show="gridData.wk_success ==  2" style="color:red">未获奖微课</b>

        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pExamine: [], //审核通过
      drawer: false,
      gridData: [],
      evData: [],
      user: {},
      options: [
        {
          value: "3",
          label: "全部"
        },
        {
          value: "1",
          label: "已获奖"
        },
        {
          value: "2",
          label: "未获奖"
        },
        {
          value: "0",
          label: "未审核"
        }
      ],
      dataEV: "",
      value: "",
      count: 10,
      loading: false
    };
  },
  mounted() {
    this.user = JSON.parse(this.$cookie.get("userAdmin"));
    this.getWks();
  },
  computed: {
    noMore() {
      return this.count >= 20;
    },
    disabled() {
      return this.loading || this.noMore;
    }
  },
  methods: {
    //获取微课
    getWks() {
      var that = this;
      that.$axios
        .get("apis/admin/wklist")
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              var wksList = res.data.data;
              console.log(wksList);
              var pExa = []; //审核通过
              for (var i = 0; i < wksList.length; i++) {
                if (wksList[i].wk_state == 1) {
                  //审核通过
                  wksList[i].wk_state = "审核通过";
                  pExa.push(wksList[i]);
                }
              }
              for (var i = 0; i < pExa.length; i++) {
                if (pExa[i].wk_success == 0) {
                  //获奖
                  pExa[i].wksucc = "未审核";
                  pExa[i].color = "color:#e6a23c";
                } else if (pExa[i].wk_success == 1) {
                  //获奖
                  pExa[i].wksucc = "已获奖";
                  pExa[i].color = "color:#67c23a";
                } else if (pExa[i].wk_success == 2) {
                  //获奖
                  pExa[i].wksucc = "未获奖";
                  pExa[i].color = "color:#f56c6c";
                }
              }
              that.pExamine = pExa;
              that.wksLists = pExa;
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //微课详情页
    left(id) {
      var that = this;
      that.$axios
        .post("apis/admin/wklistdetail", this.$qs.stringify({ wk_id: id }))
        .then(function(res) {
          if (res.status == 200) {
            console.log(res.data.data);
            if (res.data.status == 1) {
              that.drawer = true;
              that.gridData = res.data.data.wk;
              if (res.data.data.wk_evaluates.length != 0) {
                that.dataEV = 1;
                that.evData = res.data.data.wk_evaluates;
              } else if (res.data.data.wk_evaluates.length == 0) {
                that.dataEV = 0;
              }
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 2;
        this.loading = false;
      }, 2000);
    },
    //审核是否获奖
    pass(id, num) {
      var that = this;
      var parse = {
        admin_id: that.user.admin_id,
        wk_id: id,
        wk_success: num
      };
      that.$axios
        .post("apis/admin/reviewifwinning", this.$qs.stringify(parse))
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              that.getWks();
              that.drawer = false;
              that.$message({
                message:
                  num == 1
                    ? "判定获奖成功~"
                    : "给予不获奖~ 给予不获奖~ 给予不获奖~",
                type: "success"
              });
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //切换
    change(val) {
      console.log(val);
      var that = this;
      var dataList = that.wksLists;
      var pData = [];
      if (val != 3) {
        for (var i = 0; i < dataList.length; i++) {
          if (dataList[i].wk_success == val) {
            pData.push(dataList[i]);
          } else if (dataList[i].wk_success == val) {
            pData.push(dataList[i]);
          } else if (dataList[i].wk_success == val) {
            pData.push(dataList[i]);
          }
        }
        that.pExamine = pData;
      } else {
        that.pExamine = that.wksLists;
      }
    },
    //shanchu删除微课
    delWk(id) {
      var that = this;
      var parse = {
        wk_id: id
      };
      that.$axios
        .post("apis/admin/delwk", this.$qs.stringify(parse))
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              that.getWks();
              that.$message({
                message: "删除成功~",
                type: "success"
              });
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    delEval(id, wId) {
      var that = this;
      var parse = {
        evaluate_id: id
      };
      that.$axios
        .post("apis/admin/delevaluate", this.$qs.stringify(parse))
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              that.left(wId);
              that.$message({
                message: "删除评论成功~",
                type: "success"
              });
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="less" >
.menuList {
  height: 810px;
  .el-card {
    width: 100% !important;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
  }
  .evamine {
    width: 95%;
    margin: 0 auto;
    p {
      text-align: left;
      line-height: 40px;
      video {
        width: 100%;
      }
    }
    div {
      width: 40%;
      margin: 20px auto;
      display: flex;
      justify-content: space-between;
    }
  }
  .block {
    width: 95%;
    margin: 0 auto;
    .el-card {
      width: 80% !important;
      .el-card__body {
        text-align: left !important;
        padding: 10px;
      }
      .el-icon-delete:hover {
        color: red;
      }
    }
    .el-timeline-item {
      padding-bottom: 0;
    }
  }
}
</style>
